<template>
  <el-button @click="getList">添加按钮</el-button>
  <el-table :data="List" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="标题" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>标题: {{ scope.row.chapterTitle }}</div>
              <div>日期: {{ scope.row.time }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.chapterTitle}}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
    </el-table>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  props: {
    
  },
  data(){
    return {
        List: [],
        message:''
      }
  },
  methods:{
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      let chapterId = row.chapterId
      axios.post('http://localhost:3000/del',{chapterId:chapterId}).then(res => {
        if(res.code === 200) {
          this.List.splice(index,1)
        }
      })
    },
    getList() {
      axios.get('http://localhost:3000/getList').then(res => {
        this.List = res.data;
        console.log(res)
      })
    }
  },
  mounted() {
    this.getList();
  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.box{
  width: 100px;
  height: 100px;
  border: 1px solid #42b983;
  margin: 0 auto;

  background-image: url('../../spirte/bg.png');
  background-repeat: no-repeat;
  background-position: -300px -300px;
}
</style>
